<template>
  <BaseChart ref="childRef" :option="options" class="chartMainContent"></BaseChart>
</template>
<script setup>
import { nextTick, onMounted, ref, shallowRef, watch } from 'vue'
import BaseChart from '../../../components/baseChart.vue'
const options = shallowRef()
const getBaseOptions = () => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: 50,
      bottom: 10,
      left: 10,
      right: 40,
      containLabel: true
    },
    xAxis: {
      name: '类型',
      type: 'category',
      nameGap: 8,
      nameTextStyle: {
        color: '#fff'
      },
      axisLabel: {
        color: '#fff',
        interval: 0
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      splitLine: {
        show: false
      },
      data: ['数据一', '数据二', '数据三', '数据四', '数据五']
    },
    yAxis: {
      name: '数量(个)',
      type: 'value',
      nameTextStyle: {
        color: '#fff'
      },
      axisLabel: {
        color: '#fff'
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#999'
        }
      }
    },
    series: [
      {
        type: 'bar',
        itemStyle: {
          color: '#02D9FF'
        },
        data: [50, 90, 78, 26, 33]
      }
    ]
  }
}
onMounted(() => {
  nextTick(() => {
    const option = getBaseOptions()
    options.value = option
  })
})
</script>

<style scoped lang="scss">
.chartMainContent {
  height: 2.7rem;
}
</style>
